<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<script src="jquery-1.7.2.js"></script>
	<style>
            #datatable {
                padding: 25px;
                margin: 20px;
            }
            #actiontable {
                padding: 15px;
                margin: 20px;
            }
            th {
                padding: 25px;
                margin: 20px;
            }
            td {
                padding: 15px;
                margin: 10px;
            }
    </style>
</head>
<body>
<h1>JQuery Navigation, Animation and DOM manipulation Examples</h1>


<table id="datatable">
	<tr>
		<th class="col1">css class col1</th>
		<th class="col2">css class col2</th>
		<th class="col3">css class col3</th>
	</tr>
	<tr>
		<td id="cell11" class="col1">id cell11</td>
		<td id="cell12" class="col2">id cell12</td>
		<td id="cell11" class="col3">id cell13</td>
	</tr>
	<tr>
		<td id="cell21" class="col1">id cell21</td>
		<td id="cell22" class="col2">id cell22</td>
		<td id="cell21" class="col3">id cell23</td>
	</tr>
	<tr>
		<td id="cell11" class="col1">id cell31</td>
		<td id="cell12" class="col2">id cell32</td>
		<td id="cell11" class="col3">id cell33</td>
	</tr>
</table>

<hr/>

<h3> actions </h3>
<table id="actiontable">
	<tr>
		<th>actions</th>
		<th>JQuery code</th>
		<th></th>
	</tr>
	<tr>
		<td>change background of 1st column to red</td>
		<td><tt>$('.col1').css('background','red')</tt></td>
		<td><button onclick="$('.col1').css('background','red')">go</button></td>
	</tr>
	<tr>
		<td>change background of cell at 1,1 to blue</td>
		<td><tt>$('#cell11').css('background','blue')</tt></td>
		<td><button onclick="$('#cell11').css('background','blue')">go</button></td>
	</tr>

	<tr>
		<td>change background of th elements to light gray</td>
		<td><tt>$('th').css('background','lightgray')</tt></td>
		<td><button onclick="$('th').css('background','lightgray')">go</button></td>
	</tr>

	<tr>
		<td>make the data table disappear using fade out animation</td>
		<td><tt>$('#datatable').fadeOut('slow')</tt></td>
		<td><button onclick="$('#datatable').fadeOut('slow')">go</button></td>
	</tr>

	<tr>
		<td>make the data table appear again using sline down animation</td>
		<td><tt>$('#datatable').slideDown('slow')</tt></td>
		<td><button onclick="$('#datatable').slideDown('slow')">go</button></td>
	</tr>

	<tr>
		<td>add div with Hello World underneath the data table</td>
		<td><tt>$('#datatable').append('<div>Hello World</div>')</tt></td>
		<td><button onclick="$('#datatable').append('<div>Hello World</div>')">go</button></td>
	</tr>

	<tr>
		<td>add div with Hello World above the data table</td>
		<td><tt>$('#datatable').prepend('<div>Hello World</div>')</tt></td>
		<td><button onclick="$('#datatable').prepend('<div>Hello World</div>')">go</button></td>
	</tr>

</table>




</body>
</html>
